<template>
  <k-view class="mask">
    <k-image :src="lock" class="lock"></k-image>
    <k-text class="text"
      ><k-view class="cross" /><k-view>解锁查看全部<span>问题指标</span>及<span>解读</span></k-view
      ><k-view class="cross"
    /></k-text>
    <k-button type="primary" size="large" class="button" @click="buy">立即解锁</k-button>
  </k-view>
</template>

<script setup lang="ts">
import lock from '../../assets/stock/lock.png';
import { ref } from 'vue';
import { sendClickStat } from '@/utils/stat';
const onceTips = ref<boolean>(true);
interface Props {
  pageid: string;
}
const props = defineProps<Props>();
interface Emits {
  (e: 'hasClickBuy'): void;
  (e: 'clickBuy'): void;
}
const emits = defineEmits<Emits>();
const buy = () => {
  sendClickStat(`${props.pageid}.unlock.click`);
  emits('clickBuy');
  if (onceTips.value) {
    emits('hasClickBuy');
    onceTips.value = false;
  }
};
</script>

<style scoped lang="less">
.mask {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 16%, #ffffff 36%, #ffffff 100%);
  bottom: 40px;
  width: 100%;
  height: 660px;
  z-index: 2;

  .lock {
    width: 116px;
    height: 116px;
  }

  .text {
    width: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #262626;
    text-align: center;
    line-height: 58px;
    font-weight: 400;
    margin-top: 16px;

    .cross {
      width: 88px;
      height: 1px;
      background-color: rgba(179, 179, 179, 1);
    }

    span {
      color: #ff2436;
    }
  }

  .button {
    width: 582px;
    height: 72px;
    margin-top: 24px;
    background-color: #ff2436;
    border-radius: 8px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #ffffff;
    text-align: center;
    font-weight: 400;
  }
}
[theme-mode='black'] .mask {
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 16%, #121212 36%, #121212 100%);
  .text {
    color: #ffffff;
  }
}
</style>
